﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>教师注册</title>
    <link href="//at.alicdn.com/t/font_1470622887_292795.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css">
 
    <style>
        .weui_grid{background:#fff;}
        .cblue {
            color: #44A9FF;font-size:1.5rem;font-weight:700;margin-left:.5rem;
        }
        .weui_panel_access {
            position: relative;
           
        }
        .weui_panel_bd {
            position: relative;
            background-color: #fff;
            margin: .8rem 1rem;
        }
        .weui_panel_bd{position:relative}
        .ribbon-wrapper-green {
            overflow: hidden;
            position: absolute;
            width: 5rem;
            height: 5rem;
            top: 0px;
            right: 0px;
        }
        .ribbon-green {
            top: 1rem;
            width: 7rem;
            /* padding: .1rem; */
            font-size: .7em;
            text-align: center;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            position: relative;
            left: -0.5rem;
            background-color: #6ED2B8;
            color: #FBFBFB;
        }
        .ribbon-red {
            top: 1rem;
            width: 7rem;
            /* padding: .1rem; */
            font-size: .7em;
            text-align: center;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            position: relative;
            left: -0.5rem;
            background-color: #D06B6B;
            color: #FBFBFB;
        }
        .weui_media_box:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 0px;
            border-top: 0px solid #e5e5e5;
            color: #e5e5e5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            left: 15px;
        }

    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="tabbar">
            <div class="weui_tab">
                
                <div class="weui_tab_bd">
                    <div class="weui_panel">
                        <!-- 头部 -->
                        <div class="head-box" style="">
                            <div class="head-oneself">
                                <img src="https://img.alicdn.com/imgextra/i3/2101874475/TB2rJLinFXXXXavXpXXXXXXXXXX_!!2101874475.jpg_430x430q90.jpg" style="border-radius: 50%;"/>                              
                            </div>
                            <p style="margin-top:.5rem;">王菲菲</p>
                        </div>
                        
                    </div>
                    <!-- 列表 -->
                    <div class="weui_cells_title">我的课程</div>
                    <div class="weui_panel_access" style="margin-top:0">
                        
                      
                        <div class="weui_panel_bd">
                            <div class="ribbon-wrapper-green"><div class="ribbon-red">已结束</div></div>
                            <div class="weui_media_box weui_media_text">
                                <h4 class="weui_media_title">计算机网络课...<span class="cblue">9:00 ~ 12:00</span></h4>
                                <p class="weui_media_desc">网页设计一班<span style="margin:0 10px">|</span>五号楼5楼1109</p>
                            </div>

                        </div>
                        <div class="weui_panel_bd">
                            <div class="ribbon-wrapper-green"><div class="ribbon-green">即将开始</div></div>
                            <div class="weui_media_box weui_media_text">
                                <h4 class="weui_media_title">计算机网络课...<span class="cblue">9:00 ~ 12:00</span></h4>
                                <p class="weui_media_desc">网页设计一班<span style="margin:0 10px">|</span>五号楼5楼1109</p>
                            </div>

                        </div>
                        <div class="weui_panel_bd">
                            
                            <div class="weui_media_box weui_media_text">
                                <h4 class="weui_media_title">计算机网络课...<span class="cblue">9:00 ~ 12:00</span></h4>
                                <p class="weui_media_desc">网页设计一班<span style="margin:0 10px">|</span>五号楼5楼1109</p>
                            </div>

                        </div>
                    </div>
                    <!-- 三个按钮 -->
                    <div class="weui_cells_title">我的工作</div>
                  
                        
                        <div class="fun-crm">
                            <ul class="block_nav clearfix">
                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-kaoqin icon-25 color2"></b></i>
                                        <span>我的课表</span>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-tianjiajishi icon-25 color4"></b></i>
                                        <span>发布签到</span>
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-qingjiajiaban icon-25 color2"></b></i>
                                        <span>签到记录</span>
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-kqgl icon-25 color1"></b></i>
                                        <span>发布公告</span>
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-wqqd icon-25 color2"></b></i>
                                        <span>历史公告</span>
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <i class=""><b class="iconfont icon-ccxj icon-25 color3"></b></i>
                                        <span>请假申请</span>
                                    </a>
                                </li>
                                <!--工资条-有红点标识-->
                                <li>
                                    <a>
                                        <i class="">
                                            <b class="iconfont icon-gzt icon-25 color4"></b>
                                            <span class="tip-red"></span>
                                        </i>
                                        <span>工资条</span>
                                    </a>
                                </li>
                                <li>

                                </li>
                                <li>

                                </li>
                            </ul>
                        </div>
                    
                </div>
                
                <div class="weui_tabbar">
                    <a href="javascript:;" class="weui_tabbar_item">
                        <div class="weui_tabbar_icon">
                            <img src="./images/icon_nav_msg.png" alt="">
                        </div>
                        <p class="weui_tabbar_label">通知</p>
                    </a>
                    <a href="javascript:;" class="weui_tabbar_item">
                        <div class="weui_tabbar_icon">
                            <img src="./images/icon_nav_article.png" alt="">
                        </div>
                        <p class="weui_tabbar_label">课表</p>
                    </a>
                    <a href="javascript:;" class="weui_tabbar_item">
                        <div class="weui_tabbar_icon">
                            <img src="./images/icon_nav_cell.png" alt="">
                        </div>
                        <p class="weui_tabbar_label">我的</p>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>

</body>
</html>